import React, { useState } from 'react';
import { 
  TrendingUp, TrendingDown, BarChart3, Leaf, Factory, 
  Truck, Zap, Calendar, Target, AlertCircle, CheckCircle,
  ArrowUp, ArrowDown, Filter, Download, RefreshCw
} from 'lucide-react';

const CarbonDashboard = () => {
  const [timeRange, setTimeRange] = useState('month');
  const [selectedScope, setSelectedScope] = useState('all');

  // 模拟数据
  const carbonMetrics = {
    total: {
      current: 2547.8,
      previous: 2689.3,
      unit: 'tCO2e',
      change: -5.26
    },
    scope1: {
      current: 856.2,
      previous: 912.1,
      unit: 'tCO2e',
      change: -6.13
    },
    scope2: {
      current: 1234.5,
      previous: 1289.7,
      unit: 'tCO2e',
      change: -4.28
    },
    scope3: {
      current: 457.1,
      previous: 487.5,
      unit: 'tCO2e',
      change: -6.24
    }
  };

  const reductionTargets = {
    annualTarget: 15, // 年度减排目标 15%
    currentProgress: 12.3, // 当前进度 12.3%
    targetDate: '2024-12-31',
    status: 'on-track' // on-track, behind, ahead
  };

  const emissionSources = [
    { source: '燃料燃烧', value: 856.2, percentage: 33.6, trend: -2.1, color: 'bg-red-500' },
    { source: '外购电力', value: 1234.5, percentage: 48.4, trend: -4.3, color: 'bg-blue-500' },
    { source: '交通运输', value: 287.9, percentage: 11.3, trend: -1.8, color: 'bg-yellow-500' },
    { source: '废料处理', value: 169.2, percentage: 6.7, trend: -3.2, color: 'bg-green-500' }
  ];

  const monthlyTrends = [
    { month: '1月', emissions: 2890, target: 2800 },
    { month: '2月', emissions: 2756, target: 2700 },
    { month: '3月', emissions: 2643, target: 2600 },
    { month: '4月', emissions: 2598, target: 2500 },
    { month: '5月', emissions: 2512, target: 2400 },
    { month: '6月', emissions: 2448, target: 2300 },
    { month: '7月', emissions: 2398, target: 2200 },
    { month: '8月', emissions: 2367, target: 2100 },
    { month: '9月', emissions: 2289, target: 2000 },
    { month: '10月', emissions: 2198, target: 1900 },
    { month: '11月', emissions: 2156, target: 1800 },
    { month: '12月', emissions: 2089, target: 1700 }
  ];

  const alerts = [
    {
      id: 1,
      type: 'warning',
      title: '能源消耗异常',
      message: '本月电力消耗较上月增长8.5%，需要关注',
      time: '2小时前'
    },
    {
      id: 2,
      type: 'info',
      title: '数据更新',
      message: '供应商碳排放数据已完成本月更新',
      time: '5小时前'
    },
    {
      id: 3,
      type: 'success',
      title: '目标达成',
      message: '交通运输减排目标提前完成',
      time: '1天前'
    }
  ];

  // 渲染指标卡片
  const MetricCard = ({ title, metric, icon: Icon, color = 'green' }) => (
    <div className="bg-white rounded-lg shadow-md p-6">
      <div className="flex items-center justify-between mb-4">
        <div className={`p-3 rounded-lg bg-${color}-100`}>
          <Icon className={`h-6 w-6 text-${color}-600`} />
        </div>
        <div className={`flex items-center text-sm ${
          metric.change >= 0 ? 'text-red-600' : 'text-green-600'
        }`}>
          {metric.change >= 0 ? <ArrowUp className="h-4 w-4 mr-1" /> : <ArrowDown className="h-4 w-4 mr-1" />}
          {Math.abs(metric.change)}%
        </div>
      </div>
      
      <h3 className="text-sm font-medium text-gray-600 mb-2">{title}</h3>
      <div className="flex items-baseline">
        <span className="text-2xl font-bold text-gray-900">{metric.current.toLocaleString()}</span>
        <span className="ml-2 text-sm text-gray-500">{metric.unit}</span>
      </div>
      <p className="text-xs text-gray-500 mt-1">
        上期: {metric.previous.toLocaleString()} {metric.unit}
      </p>
    </div>
  );

  return (
    <div className="p-6 space-y-6">
      {/* 页面头部 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">碳足迹仪表盘</h1>
          <p className="text-gray-600">企业碳排放概览和关键指标监控</p>
        </div>
        
        <div className="flex items-center space-x-3">
          <select 
            value={timeRange} 
            onChange={(e) => setTimeRange(e.target.value)}
            className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-green-500"
          >
            <option value="week">本周</option>
            <option value="month">本月</option>
            <option value="quarter">本季度</option>
            <option value="year">本年</option>
          </select>
          
          <button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors flex items-center">
            <RefreshCw className="h-4 w-4 mr-2" />
            刷新数据
          </button>
        </div>
      </div>

      {/* 关键指标卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <MetricCard 
          title="总碳排放" 
          metric={carbonMetrics.total} 
          icon={Leaf} 
          color="green" 
        />
        <MetricCard 
          title="范围一排放" 
          metric={carbonMetrics.scope1} 
          icon={Factory} 
          color="red" 
        />
        <MetricCard 
          title="范围二排放" 
          metric={carbonMetrics.scope2} 
          icon={Zap} 
          color="blue" 
        />
        <MetricCard 
          title="范围三排放" 
          metric={carbonMetrics.scope3} 
          icon={Truck} 
          color="yellow" 
        />
      </div>

      {/* 减排目标进度 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900">减排目标进度</h2>
          <span className={`px-3 py-1 rounded-full text-sm ${
            reductionTargets.status === 'on-track' ? 'bg-green-100 text-green-800' :
            reductionTargets.status === 'behind' ? 'bg-red-100 text-red-800' :
            'bg-blue-100 text-blue-800'
          }`}>
            {reductionTargets.status === 'on-track' ? '按计划进行' :
             reductionTargets.status === 'behind' ? '进度落后' : '超前完成'}
          </span>
        </div>
        
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-600">年度减排目标</span>
            <span className="font-semibold">{reductionTargets.annualTarget}%</span>
          </div>
          
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="bg-green-500 h-2 rounded-full transition-all duration-300"
              style={{ width: `${(reductionTargets.currentProgress / reductionTargets.annualTarget) * 100}%` }}
            ></div>
          </div>
          
          <div className="flex items-center justify-between text-sm">
            <span className="text-gray-600">当前进度: {reductionTargets.currentProgress}%</span>
            <span className="text-gray-600">目标日期: {reductionTargets.targetDate}</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 排放源分析 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">排放源分析</h2>
          
          <div className="space-y-4">
            {emissionSources.map((source, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium text-gray-900">{source.source}</span>
                  <div className="flex items-center space-x-2">
                    <span className="text-sm text-gray-600">{source.value} tCO2e</span>
                    <span className={`text-xs ${source.trend >= 0 ? 'text-red-600' : 'text-green-600'}`}>
                      {source.trend >= 0 ? '↑' : '↓'}{Math.abs(source.trend)}%
                    </span>
                  </div>
                </div>
                
                <div className="flex items-center space-x-3">
                  <div className="flex-1 bg-gray-200 rounded-full h-2">
                    <div 
                      className={`${source.color} h-2 rounded-full transition-all duration-300`}
                      style={{ width: `${source.percentage}%` }}
                    ></div>
                  </div>
                  <span className="text-xs text-gray-500 w-12">{source.percentage}%</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 月度趋势 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">月度排放趋势</h2>
          
          <div className="space-y-3">
            {monthlyTrends.slice(-6).map((month, index) => (
              <div key={index} className="flex items-center justify-between">
                <span className="text-sm text-gray-600 w-12">{month.month}</span>
                
                <div className="flex-1 mx-4">
                  <div className="relative h-6 bg-gray-100 rounded">
                    {/* 目标线 */}
                    <div 
                      className="absolute top-0 bottom-0 w-0.5 bg-red-400"
                      style={{ left: `${(month.target / 3000) * 100}%` }}
                    ></div>
                    {/* 实际排放 */}
                    <div 
                      className={`h-full rounded transition-all duration-300 ${
                        month.emissions <= month.target ? 'bg-green-500' : 'bg-yellow-500'
                      }`}
                      style={{ width: `${(month.emissions / 3000) * 100}%` }}
                    ></div>
                  </div>
                </div>
                
                <div className="text-right">
                  <div className="text-sm font-medium text-gray-900">{month.emissions}</div>
                  <div className="text-xs text-gray-500">目标: {month.target}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 告警和通知 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900">告警和通知</h2>
          <button className="text-sm text-green-600 hover:text-green-700">查看全部</button>
        </div>
        
        <div className="space-y-3">
          {alerts.map((alert) => (
            <div key={alert.id} className="flex items-start space-x-3 p-3 rounded-lg bg-gray-50">
              <div className={`mt-0.5 ${
                alert.type === 'warning' ? 'text-yellow-500' :
                alert.type === 'success' ? 'text-green-500' : 'text-blue-500'
              }`}>
                {alert.type === 'warning' ? <AlertCircle className="h-5 w-5" /> :
                 alert.type === 'success' ? <CheckCircle className="h-5 w-5" /> :
                 <AlertCircle className="h-5 w-5" />}
              </div>
              
              <div className="flex-1">
                <h4 className="font-medium text-gray-900">{alert.title}</h4>
                <p className="text-sm text-gray-600">{alert.message}</p>
                <span className="text-xs text-gray-500">{alert.time}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 快速操作 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">快速操作</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button className="flex items-center justify-center space-x-2 bg-green-50 text-green-700 p-4 rounded-lg hover:bg-green-100 transition-colors">
            <BarChart3 className="h-5 w-5" />
            <span>生成月度报告</span>
          </button>
          
          <button className="flex items-center justify-center space-x-2 bg-blue-50 text-blue-700 p-4 rounded-lg hover:bg-blue-100 transition-colors">
            <Download className="h-5 w-5" />
            <span>导出数据</span>
          </button>
          
          <button className="flex items-center justify-center space-x-2 bg-purple-50 text-purple-700 p-4 rounded-lg hover:bg-purple-100 transition-colors">
            <Target className="h-5 w-5" />
            <span>设置新目标</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default CarbonDashboard; 